<template>
  <div>
    <span
      v-if="type === 'click' && newValue"
      class="text-operation"
      :style="styleAll"
      @click.stop="emits('itemEvent', { event: $event, prop: prop, scope: scope })"
      >{{ newValue }}</span
    >

    <el-dropdown
      v-if="type === 'dropdown' && newValue"
      popper-class="text-operation-dropdown"
      :trigger="trigger"
    >
      <span class="text-operation" :style="styleAll">
        {{ newValue }}
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="(item, index) in dropdownList"
            :key="index"
            @click.stop="emits('itemEvent', { event: $event, prop: prop, scope: scope })"
          >
            <img v-if="item.src" :src="item.src" />
            {{ item.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-badge
      v-if="type === 'badge' && newValue"
      :value="multilevelData(scope.row, bindConfig.badgeKey)"
      :max="badgeMax"
      :hidden="!multilevelData(scope.row, bindConfig.badgeKey)"
      :class="['text-operation-badge', badgeClass(multilevelData(scope.row, bindConfig.badgeKey))]"
    >
      <span
        class="text-operation"
        @click.stop="emits('itemEvent', { event: $event, prop: prop, scope: scope })"
      >
        {{ newValue }}
      </span>
    </el-badge>
  </div>
</template>

<script setup>
import _ from 'lodash';
const attrs = useAttrs();

const props = defineProps({
  prop: {
    type: String,
    default: '',
  },
  scope: {
    type: Object,
    default: () => {
      return {};
    },
  },
  modelValue: {
    type: [String, Object],
  },
  emptyValue: {
    type: String,
    default: '',
  },
  style: {
    type: Object,
    default: () => {},
  },
});
const emits = defineEmits(['itemEvent']);
// type:  click-点击返回， dropdown-左键点击出现下拉菜单， badge-数字或状态标记
const type = computed(() => {
  return attrs?.type || 'click';
});

// type为dropdown时，下拉值集合
const dropdownList = computed(() => {
  const { row } = props.scope;
  let arr = [];
  const { dropdownList = [], dropdownListFormatter } = attrs;
  if (dropdownListFormatter && _.isFunction(dropdownListFormatter)) {
    arr = dropdownListFormatter(row, dropdownList);
  } else {
    arr = dropdownList;
  }
  return arr;
});
// type为dropdown时，trigger属性：为空 - hover， click-左击，contextmenu-右击
const trigger = computed(() => {
  return attrs?.trigger || 'click';
});

// type为badge，badgeMax最大值
const badgeMax = computed(() => {
  return attrs?.badgeMax || 99;
});
function badgeClass(val) {
  let flag = 0;
  if (val < 9) {
    flag = 1;
  } else if (val > 9 && val <= 99) {
    flag = 2;
  } else {
    flag = 3;
  }
  return 'text-operation-badge_' + flag;
}

const newValue = computed(() => {
  const { row } = props.scope;
  const value = props.modelValue;
  const { formatter, emptyValue = '', params = '' } = attrs;

  // 如果定义了格式化函数，返回格式化内容
  if (formatter && _.isFunction(formatter)) {
    // return formatter(row);
    return formatter({ ...row, params: { ...params } });
  } else if (_.isNil(value) || value === '' || value === 'null') {
    return emptyValue;
  }
  return value;
});

const styleAll = computed(() => {
  const { row } = props.scope;
  const { styleFormatter, textStyle } = attrs;
  let flag = {};
  if (styleFormatter && _.isFunction(styleFormatter)) {
    // return formatter(row);
    flag = styleFormatter({ ...props.scope });
  }
  return { ...textStyle, ...props.style, ...flag };
});

// 对象多层级获取数据
function multilevelData(row, keyStr) {
  if (!keyStr) return 0;
  let keyList = keyStr.split('.');
  let flag = JSON.parse(JSON.stringify(row));
  for (let i in keyList) {
    if (flag[keyList[i]]) {
      flag = flag[keyList[i]];
    } else {
      flag = 0;
      return;
    }
  }
  return flag / 1;
}
</script>
<style lang="scss" scoped>
.text-operation {
  padding: 5px 6px;
  background: #efefef;
  border-radius: 4px;
  position: relative;
  top: 1px;
  cursor: pointer;
  font-size: 12px;
}
</style>
<style lang="scss">
.text-operation-dropdown {
  .el-dropdown-menu {
    padding: 0;
    .el-dropdown-menu__item {
      padding: 8px 16px;
      border-bottom: 1px solid #eaeaea;
      color: #303133;
      img {
        margin-right: 10px;
      }
    }
    .el-dropdown-menu__item:last-of-type {
      border-bottom: none;
    }
  }
}

.text-operation-badge {
  position: relative;
  .is-fixed {
    top: -4px;
    right: -20px;
    transform: scale(0.8);
    background: #e35947;
  }
}

.text-operation-badge_1 {
  .is-fixed {
    right: -12px;
    padding: 0 6px;
  }
}
.text-operation-badge_2 {
  .is-fixed {
    right: -18px;
    padding: 0 5px;
  }
}
.text-operation-badge_3 {
  .is-fixed {
    right: -24px;
    padding: 0 4px;
  }
}
</style>
